極地地域

極面グラフは円グラフに似ていますが、各セグメントの角度は同じであり、セグメントの半径は値に応じて異なります。

このタイプのグラフは、円グラフに似た比較データを表示するだけでなく、コンテキストの値のスケールも表示する場合に便利です。

使用例

new Chart(ctx, {
    data: data,
    type: 'polarArea',
    options: options
});

データセットのプロパティ

次のオプションを極面グラフ データセットに含めて、その特定のデータセットのオプションを構成できます。

スタイリング

各円弧のスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

境界線の配置

次の値がサポートされていますborderAlign。

• 'center'（デフォルト）
• 'inner'

いつ'center'を設定すると、隣り合う円弧の境界線が重なり合います。いつ'inner'が設定されている場合、すべての境界線が重ならないことが保証されます。

インタラクション

各アークとの相互作用は、次のプロパティで制御できます。

これらすべての値がundefined、関連付けられたものへのフォールバックelements.arc.*オプション。

設定オプション

これらは、極面グラフに固有のカスタマイズ オプションです。これらのオプションは、グローバル チャートのデフォルト オプション、チャートのオプションを形成します。

デフォルトのオプション

作成される PolarArea タイプごとにこれらのデフォルト値を変更することもできます。このオブジェクトは次の場所で入手できます。Chart.defaults.polarArea。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

たとえば、すべての新しい極面グラフを次のように設定するには、animateScale = falseあなたならこうします:

Chart.defaults.polarArea.animation.animateScale = false;

データ構造

極面グラフの場合、データセットにはデータ ポイントの配列が含まれている必要があります。データ ポイントは数値である必要があり、Chart.js はすべての数値を合計し、それぞれの相対的な割合を計算します。

また、各スライスにツールヒントが正しく表示されるように、ラベルの配列を指定する必要があります。

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};